<script setup>
    import * as echarts from 'echarts';
    import {Histogram, Money, Star} from "@element-plus/icons-vue";
    import {onMounted} from "vue";
    import {ref} from 'vue'
    import {
        SbestGoodService,
        SgoodCountService,
        SsoldMoneyService,
        SsellGoodCountService,
        SsellGoodMoneyService
    } from "@/api/good";

    let chartInstance3 = null;
    let chartInstance4 = null;
    //商品种数
    const totalGoodKinds = ref(5)
    const getTotalGoodKinds = async () => {
        let result = await SgoodCountService();
        totalGoodKinds.value = result.data;
    }
    //最受欢迎商品
    const mostPopularGood = ref("无")
    const getBestGood = async () => {
        let result = await SbestGoodService();
        console.log(result)
        if (result.data != null) {
            mostPopularGood.value = result.data;
        }

    }
    //总销售额
    const totalSellMoney = ref(0)
    const getTotalSellMoney = async () => {
        let result = await SsoldMoneyService();
        console.log(result)
        if (result.data != null) {
            totalSellMoney.value = result.data;
        }
    }
    //商品销售情况
    const ratio_data = [];
    //总销售情况
    const details_data = [];

    onMounted(() => {
        getTotalGoodKinds()
        getBestGood()
        getTotalSellMoney()
        let myChart3 = echarts.init(document.getElementById("ratio"));
        let myChart4 = echarts.init(document.getElementById("details"));
        const getSsellGoodCount = async () => {
            let result = await SsellGoodCountService();
            console.log(result.data)
            if (result.data != null && result.data.length > 0) {
                for (let i = 0; i < result.data.length; i++) {
                    let obj = {};
                    obj.name = result.data[i].gname;
                    obj.value = result.data[i].soldcount;
                    ratio_data[i] = obj;
                }
            } else {
                ratio_data.push({name: '无销售数据', value: 1});
                console.log('没有数据')
            }
            myChart3.setOption({
                title: [
                    {
                        left: 'center',
                        text: '商品销售量占比图'
                    }
                ],
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    padding: 10
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        // name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: ratio_data,
                        label:{
                            show: false,
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
            console.log('ratio_data数据：')
            console.log(ratio_data)
        }
        getSsellGoodCount()


        const getSsellGoodMoney = async () => {
            let result = await SsellGoodMoneyService();
            console.log(result.data)
            if(result.data!=null&&result.data.length>0){
                for (let i = 0; i < result.data.length; i++) {
                    let obj = {};
                    obj.name = result.data[i].gname;
                    obj.value = result.data[i].soldmoney;
                    details_data[i] = obj;
                }
            }
            else{
                details_data.push({name: '无销售数据',value: 0});
                console.log('无销售数据')
            }
            myChart4.setOption({
                title: [
                    {
                        left: 'center',
                        text: '商品销售额图'
                    }
                ],
                tooltip: {
                    //让商品名称完整显示，鼠标悬浮在某个柱子上时显示完整名称
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        let fullName = details_data[params[0].dataIndex].name;
                        return fullName + '<br/>' + params[0].value;
                    }
                },
                xAxis: {
                    type: 'category',
                    data: details_data.map((item) => item.name),
                    axisLabel: {
                        interval: 0,
                        rotate: 70,
                        formatter: function (value, index) {
                            if (value.length > 10) {
                                return value.substring(0, 10) + '...';
                            }
                            return value;
                        }
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '60%',
                        data: details_data.map((item) => item.value),
                        label: {
                            show: true,
                            position: 'top',
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(30, 110, 200, 0.5)'
                            }
                        },
                        animationFrom: {
                            x: 0, // 柱状图元素从x轴方向进入图表
                            y: 'top', // 柱状图元素从顶部进入图表
                            opacity: 0 // 柱状图元素进入图表时的透明度为0
                        },
                    }
                ],
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
            });
            console.log('details_data数据：')
            console.log(details_data)
        }
        getSsellGoodMoney()

        chartInstance3 = myChart3;
        chartInstance4 = myChart4;
    });
</script>
<template>
    <div class="data-body">
        <div class="data-cards">
            <el-card class="same-card">
                <div class="topIcon">
                    <el-icon>
                        <Histogram/>
                    </el-icon>
                </div>
                <div>
                    <h1>商品种数</h1>
                    <h2 type="text" style="font-size: 18px;color: #f10180">{{ totalGoodKinds }}</h2>
                </div>
            </el-card>
            <el-card class="same-card">
                <div class="topIcon">
                    <el-icon>
                        <Star/>
                    </el-icon>
                </div>
                <div>
                    <h1>最受欢迎商品</h1>
                    <h2 type="text"
                        style="font-size: 18px;color: #f10180; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                        {{ mostPopularGood }}</h2>
                </div>
            </el-card>
            <el-card class="same-card">
                <div class="topIcon">
                    <el-icon>
                        <Money/>
                    </el-icon>
                </div>
                <div>
                    <h1>总销售额</h1>
                    <h2 type="text" style="font-size: 18px;color: #f10180">{{ totalSellMoney }}</h2>
                </div>
            </el-card>
        </div>
        <div class="data-graphs" style="text-align: center;">
            <!--    饼状图-->
            <div id="ratio" style="margin-top:120px;display:inline-block;width: 98%;height: 300px;">
                饼状图
            </div>
            <!--    柱状图-->
            <div id="details" style="margin-top:120px;display:inline-block;width: 70%;height: 300px;">
                柱状图
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "DataAnalysis"
    }
</script>


<style scoped>
    .data-body {
        height: 90vh;
        overflow-y: scroll;
    }

    /*包着几张卡片的大卡片样式*/
    .data-cards {
        display: flex;
        height: 22%;
    }

    /*卡片样式*/
    .same-card {
        text-align: center;
        margin: 10px 10px 0 10px;
        flex: 3;
    }

    /*卡片中图标样式*/
    .same-card .topIcon {
        display: flex;
        float: left;
        font-size: 30px;
    }

    /*图表样式*/
    .data-graphs {
        margin-top: 0;
    }
</style>
